<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>火星时代-接金币</title>
<script src="js/jquery-1.11.3.min.js"></script>
<style>
	*{ margin: 0;padding: 0;}
	li{ list-style: none;}
	#wrap{margin: 0 auto; width: 455px; height:650px;background: url(images/bj.jpg) no-repeat left top; background-size: cover; position: relative; overflow: hidden;}
	#wrap img{position: absolute; }
	.money0,.boom{ width: 30px; top: 0px;}
	.money1{ width: 15px;top: 0px;}
	#user{ left: 100px; bottom: 0; width: 75px;}
	.begin{margin: auto; position: absolute; top: 30%; left: 200px; padding: 5px 10px; background: rgba(46,139,87,.8); border: none; color: #fff; cursor: pointer; border-radius: 3px;}
	.hxsd{ text-align: center; width: 455px; position: absolute; top: 250px; opacity: .1; font-size:25px; font-weight: 900;}
	.timebar{ width: 200px; height: 20px; overflow: hidden;border: 2px solid #007DDC; border-radius: 10px; position: absolute; top: 30px; left: 120px;}
	.time{ width: 200px; height: 20px; border-radius: 10px;  background: #ff0; margin-left: 0px;}
	.gameTime{float: right; height: 25px; line-height: 25px; line-height: 25px; background: rgba(255,255,255,.8); font-size: 14px; font-family: "微软雅黑"; padding: 0 5px; border-top-left-radius: 3px;border-bottom-left-radius: 3px; color: #333;}
	.score{float: left; height: 25px; line-height: 25px; background: rgba(255,255,255,.8); font-size: 15px; font-family: "微软雅黑";padding: 0 5px; border-top-right-radius: 3px;border-bottom-right-radius: 3px; color: #333;}
	.gameTime span{padding-right: 3px; color: #C81623;}
	.score span{padding:0 3px; color: seagreen; font-size: 16px;}
</style>
</head>
<body>
	<div id="wrap">
		<div class="score">score: <span>0</span></div>
		<div class="gameTime">游戏时间: <span></span>秒</div>
		<div class="timebar"><div class="time"></div></div>
		<button class="begin">开始游戏</button>
		<div class="hxsd">火星时代-接金币游戏</div>
		<!--<img src="images/money0.png" class="money0" data-type = "0"/>
		<img src="images/money1.png" class="money1" data-type = "1"/>-->
		<img src="images/people.png" id="user"/>
	</div>
</body>
<script type="text/javascript">
	var user = document.getElementById('user');
	var wrap = document.getElementById("wrap");
	var oScore = document.getElementsByClassName('score')[0].children[0];
	var oGameTime = document.getElementsByClassName('gameTime')[0].children[0];
	var oBtn = document.getElementsByClassName('begin')[0];
	var makeTimer = null;
	var gameTimer = null;
	var fallTimer = null;
	var maxTime = 600;
	var score = 0;	//初始分数
	var min;
	var max;
	
	var gameTime = 60;	//设置游戏时间时长
	oGameTime.innerHTML = gameTime;
	
	//点击开始游戏
	oBtn.onclick = function(){
		oBtn.style.display = 'none';
		
		//初始化速度
		var speed0 = 3;	//大金币
		var speed1 = 2;	//小金币
		var speedBoom = 2;	//炸弹
		
		//调用时间条方法
		timeBarSlide(gameTime);
		//人物移动
		move();
		//随机生成金币/炸弹
		create(1000);
		//调用金币落下方法
		fall(speed0,speed1,speedBoom);
		
		//右上角倒计时
		var timer1 = setInterval(function(){
			oGameTime.innerHTML = gameTime-1;
			gameTime--;
			if(gameTime == 0){
				clearInterval(timer1);
			}
		},1000);
		
		//每30秒加速一次
		fallTimer = setInterval(function(){
			//掉落加速
			fall(speed0*0.2,speed1*0.2,speedBoom*0.3);
			//生成加速
			create(700);
		},30000);
	}
	
	//人物移动
	function move () {
		document.onkeydown = function(ev){
			//右移动
			if(ev.keyCode == 39){
				if(user.offsetLeft > 380){
					user.style.left = "380px";
				}
				user.style.left = user.offsetLeft+4+'px';
			}
			//左移动
			if(ev.keyCode == 37){
				if(user.offsetLeft < 0){
					user.style.left = 0;
				}
				user.style.left = user.offsetLeft-4+'px';
			}
		}
	}
	
	//生成
	function create (createTime) {
		clearInterval(makeTimer);
		var imgArr = ["boom","money0","money1"];
		makeTimer = setInterval(function(){
			var index = parseInt(Math.random()*100);
			//分配出现几率
			if(index < 60){
				index = 2;
			}else if(index < 80){
				index = 1;
			}else{
				index = 0;
			}
			var posIndex = getRandom(425,0,false);
			var oImg = document.createElement('img');
			oImg.src = "images/"+imgArr[index]+".png";
			if(index==0)oImg.className = "boom";
			if(index==1)oImg.className = "money0";
			if(index==2)oImg.className = "money1";
			oImg.style.left = posIndex+"px";
			oImg.style.top = "50px";
			wrap.appendChild(oImg);
		},createTime);
	}
	
	//掉落
	function fall (speed0,speed1,speedBoom) {
		setInterval(function(){
			var aImg0 = document.getElementsByClassName('money0');
			var aImg1 = document.getElementsByClassName('money1');
			var aBoom = document.getElementsByClassName('boom');
			min = user.offsetLeft;
			max = min+50;
			//碰到消失并计算分数	参数：类型、速度、分数
			disappear(aImg0,speed0,5);
			disappear(aImg1,speed1,3);
			disappear(aBoom,speedBoom,-6);
		},30);
	}
	
	//时间条
	function timeBarSlide (gTime) {
		var oBar = document.getElementsByClassName('time')[0];
//		console.log("gTime: "+gTime);
//		var tempTime = gTime*1000;
//		var dis = 50/tempTime;
//		var pos = 200*dis;
//		//计算位置
//		var timer2 = setInterval(function(){
//			oBar.style.marginLeft = "-"+pos+"px";
//			pos += 200*dis;
//			if(pos == 200){
//				clearInterval(timer2);
//			}
//		},50);
		
		oBar.style.marginLeft = '-200px';
		oBar.style.transition = 'margin-left '+gTime+'s linear';
		//结束提示
		var tempTime = gTime*1000;
		setTimeout(function(){
			alert('游戏结束!! 您的分数是'+score+'分');
			clearInterval(fallTimer);
			location.reload();
		},tempTime);
	}
	
	//消失并计算分数
	function disappear (obj,fallOffset,countScore) {
		for(var i=0; i<obj.length; i++){
			obj[i].style.top = obj[i].offsetTop+fallOffset+'px';
			if(obj[i].offsetTop>=550 && obj[i].offsetTop<=580){
				if(obj[i].offsetLeft>min && obj[i].offsetLeft<max){
					obj[i].style.display = 'none';
					score += countScore;
					if(score < 0){
						alert("您失败了！！！");
						clearInterval(fallTimer);
						location.reload();
					}
					oScore.innerHTML = score;
				}
			}
		}
	}
	
	function getRandom (max,min,flag) {
		return parseInt(Math.random()*(max-min+flag)+min);
	}
	
	
	
</script>
</html>
